<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>读者荐购</title>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <link rel="icon" href="images/checkrecommend.png" type="img/x-ico" />
</head>

<body>

<ul>
    <li><a class="active" href="Manager.html">返回上一页</a></li>
    <li><a href="">读者荐购</a></li>
</ul>
<h1>读者荐购表：</h1>
<div id="t">
    <table id="table" class="mytable" border="2" bgcolor="#f0f8ff"></table>
</div>
</body>

</html>

<style>
    body {
        margin: 0px;
        padding: 0px;
        font-family: sans-serif;
        /*设置字体为sans-serif*/
        background-image: url(images/library.jpg);
        background-size: 100% 100%;
        background-attachment: fixed;
        /*背景图片尺寸为覆盖cover*/
    }

    h1{
        text-align: center;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }

    li {
        float: left;
    }

    li a,
    .dropbtn {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    li a:hover,
    .user:hover,
    .dropdown:hover {
        background-color: #111;
        /*鼠标移动时背景颜色*/
    }

    #t{
        padding-left:20%;
    }
    mytable {
        width: 500px;
        border: 2px;
        text-align: center;
        border-collapse: collapse;
        background-color: cornsilk;
        padding-left:20%;
    }

    .mytable tr {
        width: 100px;
        padding-left:15%;
    }

    .search input {
        float: left;
        flex: 4;
        height: 30px;
        outline: none;
        border: 1px solid white;
        box-sizing: border-box;
        padding-left: 10px;
    }

    .search button {
        float: right;
        flex: 1;
        height: 30px;
        background-color: rgb(63, 224, 245);
        color: white;
        border-style: none;
        outline: none;
    }

    .search button i {
        font-style: normal;
    }

    .search button:hover {
        font-size: 20px;
        background-color: rgb(63, 224, 245);
    }
</style>
<script>

    window.onload=function () {
        var html = "<tr><th>图书ID</th><th>图书名称</th><th>图书作者</th><th>图书出版社</th><th>推荐理由</tr>"
        $.ajax({
            url:"http://localhost:8080/recommend/findRecommend",
            type:"post",
            dataType:"json",
            success:function (res) {
                for (var i =0;i<res.data.length;i++){
                    html = html + "<tr><td>" + res.data[i].recommendId + "</td><td>" + res.data[i].recommendName + "</td><td>"+ res.data[i].recommendAuthor +
                        "</td><td>" + res.data[i].recommendPublisher + "</td><td>" + res.data[i].recommendReason  + "</td></tr>";

                }
                $("#table").html(html)
            },
            error: function (res) {
                alert("JSON数据获取失败，请联系管理员！");
            }
        })
    }


</script>